<template>
    <div class="task-wrapper"  :class="{active: isShowPush}">
        <transition name="slide-fade">
        <div class="push-wrapper">
            <!-- <Push :task_id="id" @refresh="getDetail" @setShowPush="setShowPush" @setHidePush="setHidePush"></Push> -->
        </div>
        </transition>

        <div class="basic-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>任务动态</h3>
                </div>
                <div style='display: flex; align-items: center; box-sizing: border-box; padding: 12px 18px;'>
                    <div style='margin-right: 12px;'>{{data.sn}}</div> 
                    <div style='margin-right: 12px;'>{{data.service_name}}</div>   
                    <div style='margin-right: 12px;'>{{data.plan_amount}} 积分</div>  
                    <div style='margin-right: 12px; color: red;'>{{data.is_urgent}}</div>
                    <div style='margin-right: 12px; color: red;'>{{data.is_monitor}}</div>
                    <template v-if='data.status_id === 0 || data.status_id === 1 || data.status_id === 2 || data.status_id === 3 || data.status_id === 4 || data.status_id === 5'>
                        <a-button type='primary' style='margin-right: 12px;'>下载所有附件</a-button>
                        <a-button type='primary'>任务完成</a-button>
                    </template>
                </div>
                <div style='padding: 20px 0px;'>
                    <a-steps progress-dot :current="task_step_current">
                        <a-step title="任务待审核" />
                        <template v-if='data.status_id !== 7'>
                            <a-step title="任务进行中" />
                            <a-step title="任务已完成" />
                        </template>
                        <template v-else>
                            <a-step title="任务已完成" />
                        </template>
                    </a-steps>
                </div>
                
                <div class="form-main-content">
                    <div class="msg-box" >
                        <template v-if="pushList && pushList.length">
                            <div style='line-height: 2;' v-for="push in pushList" :key='push.id'>
                                <div style='display: flex; align-items: center; flex-wrap: wrap; padding: 12px 0px;'>
                                    <div style='display: flex; align-items: center; position: relative; margin-right: 12px;'>
                                        <a-icon style='font-size: 20px;' type="mail" />
                                    </div>
                                    <span style='margin-right: .5em; color: #1890FF; font-weight: bold;'>{{push.sender}}</span>
                                    <span style='margin-right: .5em; color: #8c8c8c; font-size: 12px;'>{{push.created_at}}</span>

                                    <template v-if="push.type_id !== 52">
                                        <span style='margin-right: .5em; font-weight: bold;'>{{push.type}}</span>
                                        <template v-if='push.type_id !== 1'>
                                            <span style='margin-right: .5em;'>备注：{{push.remark || '暂无'}}</span>
                                        </template>
                                        <template v-if="push.status_id === 0">
                                            <span style='margin-left: .5em; color:red;' @click="handleShowRefuseTask(push)">拒绝</span>
                                            <span style='margin-left: .5em;' @click="handleAcceptTask(push)">接受</span>
                                        </template>
                                        <template v-else>
                                            <span>已确认</span>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <span style='margin-right: .5em;'>{{push.content}}</span>
                                        <a @click="handleShowEditPush(push)" style='margin-left: .5em;'>编辑</a>
                                        <a @click="handleDeletePush(push)" style='margin-left: .5em; color:red;'>删除</a>
                                    </template>
                                </div>
                                <div class='files'>
                                    <div v-for="(file, index) in push.images" :key='index'>
                                        <div style='display: flex; align-items: center; padding: 10px 0px;'>
                                            <div style='margin-right: .5em;'>
                                                <a-icon style='font-size: 16px;' type="file" />
                                            </div>
                                            <span style='margin-right: .5em; font-weight: bold;'>{{file.filename}}.{{file.suffix}}</span>
                                            <template v-if='file.suffix === "pdf"'>
                                                <a style='margin-right: .5em;' target='_blank' :href='file.url'>查看</a>
                                            </template>
                                            <a :href='file.url'>下载</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        
                        <div v-else style='text-align: center; line-height: 3;'>暂无数据</div>
                        <div v-show="push_all_show" @click="getPushList" class="show_all">展开所有动态</div>
                    </div>
                    <a-form @submit.prevent="handleCreatePush" :form="pushForm" class="form-main-content" style="padding: 0; margin-top: 20px;">
                        <a-form-item label="" style="margin-bottom: 0;">
                            <a-textarea :rows="3" placeholder="请输入任务动态，有文本信息才能发布" v-decorator="[
                                'content',
                                {rules: [{ required: true, message: '请输入文本信息' }]}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="">
                            <div style="display: flex; justify-content: space-between;">
                                <a-upload
                                    name="file"
                                    :multiple="false"
                                    :customRequest="this.handleUploadFile"
                                >
                                    <a-button type='primary'> <a-icon type="link" /> 上传附件 </a-button>
                                </a-upload>
                                <a-button type='primary' html-type="submit"> 发送 </a-button>
                            </div>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </div>

        <div class="basic-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>任务日历</h3>
                </div>
                
                <div style='padding: 12px 18px;'>
                    <div>任务执行时间：{{data.period_time}}</div>
                    <a-calendar :defaultValue='time_value' @select='handleSelectDate'>
                        <div slot="dateCellRender" slot-scope="value" style='position: absolute;left: 0;right: 0;top: 0;bottom: 0;'>
                            <div v-if="getDateData(value)" class="badge-box">
                            </div>
                            <span v-if='getDateFile(value)' class="badge"></span>
                        </div>
                    </a-calendar>
                    <div style='font-size: 12px; margin-top:20px;'>{{time_push}}</div>
                    <div style='border: 1px solid #696969; height: 100px; overflow: auto; margin-top:20px; padding: 8px 12px;'>
                        <div style='line-height: 2;'>
                            <template v-if='time_push_list && time_push_list.length'>
                                <div v-for="(push, index) in time_push_list" :key='index'>
                                    <span style='margin-right: 0.5em;'>{{push.sender}}</span>
                                    <span style='margin-right: 0.5em;'>{{push.created_at}}</span>
                                    <span style='margin-right: 0.5em;'>{{push.type}}</span>
                                    <span v-if="push.type_id === 52">
                                        {{push.content}}
                                    </span>
                                    <span v-else>
                                        备注：{{push.remark || '暂无备注'}}
                                    </span>
                                </div>
                            </template>
                            <div v-else style='text-align: center;'>暂无数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="basic-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>一、基本信息</h3>
                    <div class="operate">
                        <!-- <router-link to="/task/video/:1234" >
                            <a-button style="font-size:15px;"  type="primary" icon="video-camera">实时视频</a-button>
                        </router-link> -->
                        <a-button v-if="disabled" type="primary" @click="edit">修改</a-button>
                        <a-button v-if="!disabled" type="primary" @click="transportSubmit">保存</a-button>
                        <a-button v-if="data.status_id ==3"  type="primary" @click="handleCollection(8)">采集暂停</a-button>
                        <a-button v-if="data.status_id ==8"  type="primary" @click="handleCollection(3)">采集继续</a-button>
                    </div>
                </div>
                <div id="update-form" :class="{active: isActive}">
                    <a-form :form="form" class="form-main-content" :hideRequiredMark="true">
                        <a-row :gutter="10">
                            <a-col v-for="(v,k) in basic" :key="k" :span="col_span" class="form-item">
                                <a-form-item :label="v.label">
                                    <i v-if="data[v.value] =='紧急'" style="color:#FF5151">{{data[v.value]}}</i>
                                    <i v-else-if="v.value =='service_amount' && data[v.value] < 1000" style="color:#FF5151">{{data[v.value]}}</i>
                                    <i v-else-if="v.value =='user_amount' && data[v.value] < 1000" style="color:#FF5151">{{data[v.value]}}</i>
                                    <i v-else>{{data[v.value]}}</i>
                                </a-form-item>
                            </a-col>
                            <a-col key="order_sn" :span="8" class="form-item">
                                <a-form-item label="对应订单">
                                    <router-link :to="'/orders/update/'+data.order_id">{{data.order_sn}}</router-link>
                                </a-form-item>
                            </a-col>
                            <!-- <a-col key="charge" :span="8" class="form-item">
                                <a-form-item label="对应报告">
                                    无
                                </a-form-item>
                            </a-col> -->
                            <a-col key="request" :span="8" class="form-item">
                                <a-form-item label="服务要求">
                                    {{data.order_request}}
                                </a-form-item>
                            </a-col>
                            <a-col key="remark" :span="24" class="form-item">
                                <a-form-item label="订单备注">
                                    <div v-if="disabled">{{data.remark ? data.remark : '无'}}</div>
                                    <a-textarea :rows="6" placeholder="请输入备注信息" v-decorator="[
                                        'remark',
                                        {
                                            rules: [{
                                                required: false, message: '请输入备注信息'
                                            }],
                                            initialValue: data.remark
                                        }
                                    ]" v-if="!disabled"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-button type="primary" @click="isActive = !isActive">
                            更多信息<img src="../../assets/images/more-down.svg" class="more-info-img"
                                     :class="{active: isActive}" alt="">
                        </a-button>
                        <div class="extra-info" :class="{active: isActive}">
                            <a-form class="form-main-content extra-info-form">
                                <a-row :gutter="10">
                                    <a-col key="service_contact" :span="col_span" class="form-item">
                                        <a-form-item label="客户联系人">
                                            {{data.service_contact}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="service_mobile" :span="col_span" class="form-item">
                                        <a-form-item label="客户联系方式">
                                            {{data.service_mobile}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="service_address" :span="col_span" class="form-item">
                                        <a-form-item label="联系地址">
                                            {{data.service_address}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="sale" :span="8" class="form-item">
                                        <a-form-item label="相关销售">
                                            {{data.sale}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="sale_mobile" :span="8" class="form-item">
                                        <a-form-item label="销售联系方式">
                                            {{data.sale_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="dispatch" :span="8" class="form-item">
                                        <a-form-item label="相关调度">
                                            {{data.dispatch}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="dispatch_mobile" :span="8" class="form-item">
                                        <a-form-item label="调度联系方式">
                                            {{data.dispatch_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="finance" :span="8" class="form-item">
                                        <a-form-item label="相关财务">
                                            {{data.finance}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="finance_mobile" :span="8" class="form-item">
                                        <a-form-item label="财务联系方式">
                                            {{data.finance_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="trip" :span="8" class="form-item">
                                        <a-form-item label="出行方式">
                                            {{data.trip}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="stay" :span="8" class="form-item">
                                        <a-form-item label="住宿方式">
                                            {{data.stay}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </div>
                    </a-form>
                </div>
            </div>
        </div>
        <!-- <div class="report-info-wrapper">
            <div class="inner-info">

                <Report :task_id="data.id" :dispatch_id="data.dispatch_id" :order_id="data.order_id" ref="report"></Report>
            </div>
        </div> -->
        <div class="address-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>二、地址信息</h3>
                </div>
                <div class="form-main-content">
                    <a-row :gutter="10">
                        <a-col key="address" :span="24">
                            <div class="address-a">
                                <div class="textarea-desc">
                                    <span class="prefix-name">飞行地址：</span>
                                    <div>
                                        <i>{{data.address}}</i>
                                        <img class="address-show" v-if="data.lng_lat" @click="showAddress" src="./../../assets/images/site.svg" alt="">
                                    </div>
                                </div>
                                <div>
                                    <span class="prefix-name" v-if="data.type_id == 3">预计面积：</span>
                                    <span class="prefix-name" v-if="data.type_id == 4">预计点数：</span>
                                    <span class="prefix-name" v-if="data.type_id == 5">预计长度：</span>
                                    {{data.area ? parseFloat(data.area) : 0}} {{getUnit}}
                                </div>
                                <!--高德地图-->
                                <a-modal v-model="showaddress" title="飞行地址" :footer="null" class="fly-address-modal"
                                         centered
                                         width="800"
                                         :keyboard = 'false'
                                         :maskClosable = 'false'>
                                    <show-map :type="this.data.type_id" :lnglat="this.data.lng_lat" :address="{address: data.address, area: data.area ? parseFloat(data.area) : 0}"></show-map>
                                </a-modal>
                            </div>
                        </a-col>
                        <a-col :span="24" class="form-item" >
                            <span class="relate-image">地图图片：</span>
                            <div v-if=" data.images !==''" class="img-displayed">
                                <img class="img-view" @click="handlePreview(v)" v-for="(v,k) in data.images" :key="k" :src="v" alt=""/>
                            </div>
                            <!-- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                <img style="width: 100%" :src="previewImage"/>
                            </a-modal> -->
                            <div v-if="previewVisible" class="shadeTier"></div>
                            <div v-if="previewVisible" class="shadeMap">
                                <div :style="imgStyle" class="popUpImg">
                                    <div class="img">
                                        <div @click="close" class="shut" >
                                            <a-icon type="close" />
                                        </div>
                                        <img :src="previewImage" alt="">
                                    </div>
                                </div>
                            </div>
                        </a-col>
                        <a-col key="ship" :span="24" :style="{display: 'none'}">
                            <div class="address-b">
                                <span class="prefix-name">航线列表：</span>
                                <a-button type="primary"  v-if="user_id == data.dispatch_id" @click="showAddShip" icon="plus">新增航线</a-button>
                            </div>
                            <a-table :columns="shipColumns" :dataSource="shipData" :rowKey="record => record.id" bordered>
                                <template slot="id" slot-scope="text,record,index">{{index+1}}</template>
                                <span slot="status" slot-scope="record">
                                    <a @click="changeAirStatus(record)"  v-if="user_id == data.dispatch_id">{{record.status}}</a>
                                    <i v-else>{{record.status}}</i>
                                    <a-modal
                                            v-model='shipShow'
                                            title="航线状态"
                                            @ok = 'shipStatus'
                                            width="450px"
                                            :cancelButtonProps="{ props: {type: 'primary'}}"
                                            centered
                                            :keyboard = 'false'
                                            okText = '确认'
                                            :maskClosable = 'false'
                                    >
                                    <div class="confirm-delete-wrapper">
                                        <p>是否{{record.status == '停用' ? '启用' : '停用'}}此航线？</p>
                                    </div>
                                    </a-modal>
                                </span>
                                <span slot="action" slot-scope="text, record" class="operate-column">
                                    <a href="#" @click.prevent="showKmlMapContent(record.file)"><img src="./../../assets/images/view.svg" alt=""></a>
                                    <a :href="record.file"><img src="./../../assets/images/download.svg" alt=""></a>

                                </span>
                            </a-table>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>
        <div class="time-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>三、时间信息</h3>
                </div>
                <div class="form-main-content">
                    <a-row :gutter="10">
                        <a-col key="cycle" :span="14" class="form-item">
                            <a-form-item label="本周期时间">
                                {{data.period_time}}
                            </a-form-item>
                        </a-col>
                        <a-col key="collect" :span="10" class="form-item">
                            <a-form-item label="采集时段">
                                {{getCollectTime}}
                            </a-form-item>
                        </a-col>
                        <a-col key="plan_time" :span="14" class="form-item">
                            <a-form-item label="任务计划执行时间">
                                <a href="#" @click.prevent="showTimePicker = true" v-if="data.plan_started_at === '0000-00-00 00:00:00'
                                || data.plan_ended_at === '0000-00-00 00:00:00'" >
                                    点击设置
                                </a>
                                <div v-else class="revise-time">
                                    <p>{{taskPlanExeTime}}</p>
                                    <a href="#" @click.prevent="showTimePicker = true">点击修正</a>
                                </div>
                                <time-select :time="start_end" :show-date-picker="showTimePicker" @pickerTimePeriod="pickTime" @cancel="cancelSelect"></time-select>
                            </a-form-item>
                        </a-col>
                        <a-col key="hand_type" :span="10" class="form-item">
                            <a-form-item label="指定数据交付时间">
                                <span v-if="this.data.hand_type === '不指定'">不指定</span>
                                <span v-else :style="{color: '#FF5151'}">{{getHandTime}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col key="cycle_day" :span="14" class="form-item">
                            <a-form-item label="任务实际执行时间">
                                <i v-if="data.started_at !=='0000-00-00 00:00:00'">{{data.started_at}}</i><i v-if="data.ended_at !=='0000-00-00 00:00:00'">~{{data.ended_at}}</i>
                            </a-form-item>
                        </a-col>
                        <a-col key="handed_at" :span="10" class="form-item">
                            <a-form-item label="实际数据交付时间">
                                <i v-if="data.handed_at !=='0000-00-00 00:00:00'">{{data.handed_at}}</i>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <div class="canvas-container">
                        <canvas id="myCanvas" height="230" width="880">
                            Your browser does not support the HTML5 canvas tag.
                        </canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="person-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>四、人员信息</h3>
                    <div class="operate-right">
                        <a-button @click="editPilot" type="primary" v-if="!editpilot && user_id == data.dispatch_id">修改</a-button>
                        <!-- <a-button type="primary" v-if="editpilot" @click="returned" >还原默认</a-button> -->
                        <a-button type="primary" v-if="editpilot" @click="getNoTaskPilot" >还原默认</a-button>
                        <a-button @click="savePilot" type="primary" v-if="editpilot" style="margin-left: 10px;">保存</a-button>
                    </div>
                </div>
                <div class="change-wrapper">
                    <div v-if="editpilot" class="before-select">
                        <div class="before-select-note">
                            任务开始前后
                            <a-input v-model="day" placeholder="0" style="width:80px"/>
                            天内无任务的飞手
                            <a-button type="primary" @click="getNoTaskPilot">搜索</a-button>
                        </div>
                        <a-table :columns="pilotNoTaskColumns" :dataSource="pilotNoTaskData" rowKey="user_id" bordered>
                            <span slot="action" slot-scope="text, record,index">
                            <a @click="noTaskPilotCheck(index)">选中</a>
                            </span>
                        </a-table>
                    </div>
                    <div class="note-selected-pilot">已选择飞手</div>
                    <a-table :columns="pilotColumns" :dataSource="pilotData" rowKey="user_id" bordered>
                        <span slot="end" slot-scope="text, record">
                          <i :style="{color: '#FF5151'}" v-if="Date.parse(new Date(record.last_ended_at)) > Date.parse(new Date(plan_time.plan_time[0]))">{{record.last_ended_at}}</i>
                          <i v-else>{{record.last_ended_at}}</i>
                        </span>
                        <span slot="start" slot-scope="text, record">
                          <i :style="{color: '#FF5151'}" v-if="Date.parse(new Date(record.next_started_at)) < Date.parse(new Date(plan_time.plan_time[1]))">{{record.next_started_at}}</i>
                          <i v-else>{{record.next_started_at}}</i>
                        </span>
                        <span slot="is_main" slot-scope="text, record,index">
                        <a-icon type="check" v-if="record.is_main ==1"/>
                        <a @click="setMainPilot(index)" v-else-if="editpilot">设为主飞手</a>
                        </span>
                        <span slot="action" slot-scope="text, record,index">
                            <a @click="taskPilotCheck(index)">取消选中</a>
                        </span>
                    </a-table>
                </div>
            </div>
        </div>
        <div class="device-info-wrapper">
            <!-- <Device :task_id="id" :dispatch_id="data.dispatch_id"  :device_remark="data.device_remark"></Device> -->
        </div>
        <div class="push-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>六、推送列表</h3>
                </div>
                <div class="form-main-content">
                    <a-table :columns="pushColumns" :dataSource="pushData" :pagination="pushPage" :rowKey="record => record.id" bordered>
                        <span slot="sn" slot-scope="record">
                            <router-link :to="'/push/update/'+record.id">{{record.sn}}</router-link>
                        </span>
                    </a-table>
                </div>
            </div>
        </div>
        <div class="status-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>七、状态列表</h3>
                </div>
                <div class="form-main-content">
                    <div class="status-table">
                        <a-table :columns="statusColumns"
                                 :dataSource="statusData"
                                 :rowKey="record => record.status"
                                 :pagination="false"
                                 bordered>
                        </a-table>
                    </div>
                </div>
            </div>
        </div>
        <!--新增航线-->
        <a-modal v-model="showaddship" title="新增航线" @ok="shipSubmit" @cancel="airLineCancel"
             :cancelButtonProps="{ props: {type: 'primary'}}"
             centered
             :keyboard = 'false'
             :maskClosable = 'false'>
            <a-form :form="form_ship">
                <a-form-item label="航线名称" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                             :wrapperCol="{lg: {span: 16}, sm: {span: 17} }">
                    <a-input placeholder="航线名称"
                             v-decorator="['name',{rules: [{ required: true, message: '请输入航线名称' }]}]"/>
                </a-form-item>
                <a-form-item label="选择航线" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                             :wrapperCol="{lg: {span: 16}, sm: {span: 17} }">
                    <transition name="fade">
                    <div v-if="!kmlFileName" class="kml-file-upload">
                        <a-upload :customRequest="upload" :fileList="shipFiles" :remove="handleAirLineChange"
                                  :beforeUpload="beforeAirUpload"
                                  v-decorator="['file',{rules: [{ required: true, message: '请选择文件' }]}]" accept=".kml">
                            <a-button type="primary">
                                上传
                            </a-button>
                            <div class="file-necessary" v-if="fileNecessary">请选择文件</div>
                        </a-upload>
                    </div>
                    <p class="kml-file-name" v-if="kmlFileName">{{kmlFileName}}</p>
                    </transition>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model="showKmlMap" title="KML地图" :footer="null" class="fly-address-modal"
                 centered
                 width="800"
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <kml-map :kml=kml></kml-map>
        </a-modal>
        <a-modal
                v-model='show_delete'
                title='删除航线'
                @ok = 'handleDelete'
                width="450px"
                :cancelButtonProps="{ props: {type: 'primary'}}"
                centered
                :keyboard = 'false'
                okText = '删除'
                :maskClosable = 'false'
        >
            <div class="confirm-delete-wrapper">
                <p>是否删除航线？</p>
            </div>
        </a-modal>
        <!-- 继续采集 -->
        <a-modal v-model="showContinueCollection" title="采集继续" @ok="operateContinueCollection"
                    :cancelButtonProps="{ props: {type: 'primary'}}"
                    cancelText="撤回"
                    centered
                    :keyboard='false'
                    :maskClosable='false'>
            <div class="confirm-delete-wrapper">
                <p>是否继续采集？</p>
            </div>
        </a-modal>
        <!-- 暂停采集 -->
        <a-modal v-model="showPauseCollection" title="采集暂停" @ok="operatePauseCollection"
                    :cancelButtonProps="{ props: {type: 'primary'}}"
                    cancelText="撤回"
                    centered
                    :keyboard='false'
                    :maskClosable='false'>
            <div class="confirm-delete-wrapper">
                <p>是否暂停采集？</p>
            </div>
        </a-modal>

        <!-- 修改推送消息 -->
        <a-modal
            title="修改"
            :visible="edit_push_visible"
            @ok="handleEditPush"
            @cancel='edit_push_visible=false'
            >
           <a-form :form="edit_push_form">
                <a-form-item label="文本信息">
                <a-input
                    placeholder='请输入文本信息'
                    v-decorator="['content', { rules: [{ required: true, message: '请输入文本信息' }] }]"
                />
                </a-form-item>
           </a-form>
        </a-modal>

        <!-- 拒绝任务 -->
        <a-modal
            title="拒绝任务"
            :visible="refuse_task_visible"
            cancelText='我再想想'
            @ok="handleRefuseTask"

            @cancel='refuse_task_visible=false'
        >
           <a-form :form="refuse_task_form">
                <a-form-item label="拒绝原因">
                <a-input
                    placeholder='请输入拒绝原因'
                    v-decorator="['refuse_reason', { rules: [{ required: true, message: '请输入拒绝原因' }] }]"
                />
                </a-form-item>
           </a-form>
        </a-modal>

    </div>
</template>

<script>
    import moment from 'moment'
    import ShowMap from '@/components/showMap'
    import Device from './device'
    import TimeSelect from "@/components/timeSelect";
    import Report from "@/components/task/report";
    import Push from "@/components/task/push";
    import KmlMap from "@/components/kmlMap";
    import {getBase64} from "@/utils/ImageBase64";
    export default {
        components: {KmlMap, TimeSelect, ShowMap,Device,Report,Push},
        data() {
            return {
                imgStyle:'',
                user_id:this.$store.getters.user_id,
                menus: [],
                id: 0,
                isActive: false,
                form: this.$form.createForm(this),
                form_ship: this.$form.createForm(this),
                col_span: 8,
                showContinueCollection:false,
                showPauseCollection:false,
                collectionStatus:0,
                basic: [{label: '任务编号', value: 'sn'}, {label: '任务名称', value: 'order_name'}, {
                    label: '任务状态',
                    value: 'status'
                }, {label: '服务类型', value: 'order_type'}, {label: '是否紧急', value: 'is_urgent'}
                // {
                //     label: '是否实时监控',
                //     value: 'is_monitor'
                // }
                , {label: '服务号', value: 'service_sn'}, {label: '服务号名称', value: 'service_name'}, {
                    label: '服务号余额',
                    value: 'service_amount'
                }, {label: '账号', value: 'service_username'}, {label: '账号名称', value: 'service_account'}, {
                    label: '账号余额',
                    value: 'user_amount'
                }],
                data: [],
                disabled: true,
                showTimePicker: false,
                transports: [],
                showaddress: false,
                pushPage:{
                    current: 1,
                    total: 0,
                    pageSize: 5,
                    showTotal: (total) => {
                        return '共' + total + '条'
                    },
                    onChange: (page, size) => {
                        this.pushPageChange(page, size)
                    },
                },
                shipColumns: [
                    {title: "序号", scopedSlots: {customRender: "id"}, align: "center"},
                    {title: "名称", dataIndex: "name", align: "center"},
                    {title: "状态", scopedSlots: {customRender: "status"}, align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},
                ],
                pilotColumns: [
                    {title: "姓名", dataIndex: "realname", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "前一任务地址", dataIndex: "last_address", align: "center"},
                    {title: "前一任务结束时间", scopedSlots: {customRender: "end"}, align: "center"},//last_ended_at
                    {title: "后一任务地址", dataIndex: "next_address", align: "center"},
                    {title: "后一任务开始时间", scopedSlots: {customRender: "start"}, align: "center"},//next_started_at
                    {title: "状态", dataIndex: "status", align: "center"},
                    {title: "主飞手", scopedSlots: {customRender: "is_main"}, align: "center"},

                ],
                pilotNoTaskColumns: [
                    {title: "姓名", dataIndex: "realname", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "前一任务地址", dataIndex: "last_address", align: "center"},
                    {title: "前一任务结束时间", dataIndex: "last_ended_at", align: "center"},
                    {title: "后一任务地址", dataIndex: "next_address", align: "center"},
                    {title: "后一任务开始时间", dataIndex: "next_started_at", align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},

                ],
                pushColumns: [
                    {title: "推送编号", scopedSlots: {customRender: "sn"}, align: "center"},
                    {title: "推送类型", dataIndex: "type", align: "center"},
                    {title: "推送时间", dataIndex: "created_at", align: "center"},
                    {title: "推送发出人", dataIndex: "sender", align: "center"},
                    {title: "推送接收人", dataIndex: "receiver", align: "center"},
                    {title: "结果", dataIndex: "status", align: "center"},
                ],
                statusColumns: [
                    {title: "状态", dataIndex: "status", align: "center"},
                    {title: "状态时间", dataIndex: "time", align: "center"},
                ],
                shipShow: false,
                shipShowData: {},
                shipData: [],
                pilotData: [],
                pushData: [],
                statusData: [],
                shipFiles: [],
                showaddship: false,
                start_end: [],
                day: 3,
                pilotNoTaskData: [],
                editpilot: false,
                plan_time:{plan_time:[]},
                fileNecessary: false,
                delete_id: '',
                show_delete: false,
                isShowPush:false,
                canvas: {},
                ctx: {},
                timeInfo: [],
                padding: 140,
                k: '',
                step: 1,
                totalStep: 50,
                speed: 1.2,

                showKmlMap: false,
                kml: '',
                kmlFileName: '',
                previewVisible: false,
                previewImage: '',

                pushList: [],
                pushForm: this.$form.createForm(this),
                pushFile: [],
                push_date_list: [],

                push_list: {
                    pagination: {
                        page: 1,
                        page_size: 3
                    }
                },
                push_all_show: false,

                task_step_current: 0,
                edit_push_visible: false,
                select_push: null,
                edit_push_form: this.$form.createForm(this),

                time_push_list: [],
                time_push: moment().format('YYYY年MM月DD日'),
                time_value: moment(),

                refuse_task_visible: false,
                refuse_task_form: this.$form.createForm(this),
            }
        },
        computed: {
            taskPlanExeTime() {
                if (this.start_end.length > 0) {
                    return this.start_end[0] + ' - ' + this.start_end[1]
                }
            },
            getHandTime() {
                if (this.data.period_time) {
                    let periods = this.data.period_time.split('-');
                    let end = periods[periods.length - 1];

                    if (this.data.hand_type === '不指定') {
                        return '不指定'
                    } else if (this.data.hand_type === '周期结束前') {
                        return  moment(end, 'YYYY.MM.DD HH:mm').subtract(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm');
                    } else if (this.data.hand_type === '周期结束后') {
                        return moment(end, 'YYYY.MM.DD HH:mm').add(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm');
                    }
                }
            },
            getCollectTime() {
                if (this.data.period_time) {
                    let periods = this.data.period_time.split('-');

                    let one = moment(periods[0], 'YYYY.MM.DD HH:mm').format('HH:mm');
                    let two = moment(periods[1], 'YYYY.MM.DD HH:mm').format('HH:mm');
                    return one + '-' + two;
                }
            },
            getUnit() {
                let unitMap = {
                    '3': '平方公里',
                    '4': '个',
                    '5': '公里',
                }

                return unitMap[this.data.type_id]
            }
        },
        methods: {
            transportSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.data = {...this.data, ...values};
                                this.disabled = true
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            edit() {
                this.disabled = false;
            },
            setShowPush(){
                this.isShowPush = true
            },
            setHidePush(){
                this.isShowPush = false
            },
            editPilot() {//显示修改飞手
                if(!this.plan_time.plan_time.length ){
                    this.$message.warning("请先在“时间信息”中设置任务的计划执行时间", 1);return false
                }
                this.getNoTaskPilot()
                this.editpilot = true
                this.pilotColumns.push({title: "操作", scopedSlots: {customRender: "action"}, align: "center"})
            },
            savePilot() {
                this.http('put', 'pilot/update?id=' + this.id, {pilots: this.pilotData}).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg, 1);
                        this.pilotColumns.pop()
                        this.editpilot = false
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                })
            },
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.$router.push('/pilot')
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            shipStatus(data) {
                this.http("put", "order-ship/update?id=" + this.shipShowData.id).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg, 1);
                        this.getDetail(this.id);
                        this.shipShow = false;
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                });
            },
            changeAirStatus(data) {
                this.shipShow = true;
                this.shipShowData = data;
            },
            tpChange(v) {
                this.data.transport_id = v
            },
            showAddShip() {
                this.showaddship = true
            },
            showAddress() {
                this.showaddress = true

            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64.replace(/octet-stream/g, 'kml')}).then(res => {
                        this.shipFiles = [{uid: 0, name: res.url, url: res.imgurl}];
                        this.fileNecessary = false;
                    });
                });
                this.kmlFileName = file.file.name;
            },
            pushPageChange(page, size) {
                this.pushPage.current = page
                this.getPush()
            },
            getPush(params) {//获取任务历史推送列表
                // this.http('get', 'push/index', Object.assign({
                //     task_id: this.data.id,
                //     page_size: this.pushPage.pageSize,
                //     page: this.pushPage.current,
                //     task:1
                // }, params)).then(res => {
                //     this.pushData = res.data
                //     this.pushPage.total = res.total_count
                // })
            },
            async postData(param) {
                return await this.http('put', 'task/update?id=' + this.id, param);
            },
            handleCollection(status){
                if(status ==3){
                    this.showContinueCollection = true
                }else{
                    this.showPauseCollection = true
                }
                this.collectionStatus = status
            },
            operateContinueCollection() {
                this.postData({status: this.collectionStatus}).then(res=>{
                    this.showContinueCollection = false;
                    this.data.status_id = this.collectionStatus
                })
            },
            operatePauseCollection() {
                this.postData({status: this.collectionStatus}).then(res=>{
                    this.showPauseCollection = false;
                    this.data.status_id = this.collectionStatus
                })
            },
            close(){
                this.imgStyle= 'transform:scale(0);'
                var _this = this
                setTimeout(()=>{
                    _this.previewVisible = false
                },200)
            },
            handlePreview(file) {
                this.previewImage = file
                this.previewVisible = true
                var _this = this
                setTimeout(()=>{
                    _this.imgStyle = 'transform: scale(1);'
                },50)
            },
            handleCancel() {
                this.previewVisible = false
            },
            async getDetail(id) {
                let data = await this.http('get', 'task/view', {id: id});
                data.transport_id = String(data.transport_id)
                this.transports = data.transports
                this.shipData = data.ships.data
                //this.pushData = data.push.data
                this.statusData = data.statuses;
                if(data.plan_started_at[0] !== '0'){
                  this.plan_time = {plan_time:[data.plan_started_at,data.plan_ended_at]}
                  this.start_end = [moment(data.plan_started_at).format('YYYY-MM-DD HH:mm:ss'), moment(data.plan_ended_at).format('YYYY-MM-DD HH:mm:ss')];
                }

                this.data = data;

                let periods = data.period_time.split('-');

                let handTime = moment(periods[1], 'YYYY.MM.DD HH:mm').format('YYYY-MM-DD HH:mm');
                if (this.data.hand_type === '周期结束前') {
                    handTime = moment(periods[1], 'YYYY.MM.DD HH:mm').subtract(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm')
                } else if (this.data.hand_type === '周期结束后') {
                    handTime = moment(periods[1], 'YYYY.MM.DD HH:mm').add(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm')
                }

                let timeArr = [
                    moment(periods[0], 'YYYY.MM.DD HH:mm').valueOf(),
                    moment(periods[1], 'YYYY.MM.DD HH:mm').valueOf(),
                    moment(data.plan_started_at).valueOf(),
                    moment(data.plan_ended_at).valueOf(),
                    moment(data.started_at).valueOf(),
                    moment(data.ended_at).valueOf(),
                    moment(data.handed_at).valueOf(),
                    moment(handTime).valueOf(),
                ];
                this.timeInfo =  timeArr.filter(item => {
                    return !isNaN(item)
                });

                //设置 task_step_current
                if(this.data){
                    const { status_id } = this.data
                    if(status_id === 7){
                        //任务取消
                        this.task_step_current = 2
                    }else{
                        if(status_id === 0){
                            this.task_step_current = 1
                        }else if(status_id === 1 || status_id === 2 || status_id === 3 || status_id === 4 || status_id === 5){
                             this.task_step_current = 2
                        }else if(status_id === 6){
                            this.task_step_current = 3
                        }
                    }
                }
            },
            delShip(id) {
                this.show_delete = true;
                this.delete_id = id;
            },
            handleDelete() {
                this.http("delete", "order-ship/delete", {id: this.delete_id}).then(res => {
                    if (res.status == "success") {
                        this.$message.success(res.msg, 1);
                        this.show_delete = false;
                        this.getDetail(this.id);
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                })
            },
            airLineCancel() {
                this.form_ship.resetFields();
                this.fileNecessary = false;
                this.shipFiles = [];
                this.kmlFileName = '';
            },
            handleAirLineChange() {
                this.kmlFileName = '';
                this.shipFiles = this.shipFiles.filter(item => {
                    return item.status !== 'removed'
                });
            },
            beforeAirUpload(file) {
                let fileInfo = file.name.split('.');
                const typeB = fileInfo[fileInfo.length - 1] === "kml";
                if (!typeB) {
                    this.$message.error("请选择kml格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                if (typeB && isLt2M) {
                    if (!this.form_ship.getFieldValue('name')) {
                        this.form_ship.setFieldsValue({'name': file.name.substring(0, file.name.indexOf('.'))})
                    }
                }
                return typeB && isLt2M;
            },
            shipSubmit() {
                this.form_ship.validateFields((err, values) => {
                    if (!err) {
                        if (this.shipFiles.length <= 0) {
                            this.fileNecessary = true;
                            return;
                        }
                        values.file = this.shipFiles[0].name
                        values.order_id = this.data.order_id;
                        values.task_id = this.id;
                        this.http('post', 'order-ship/create', values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.getDetail(this.id);
                                this.airLineCancel();
                                this.showaddship = false;
                                this.kmlFileName = '';
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            getNoTaskPilot() {//获取无任务飞手
                this.http('get', 'pilot/no-task-pilot', {
                    time: this.plan_time.plan_time,
                    day: this.day?this.day:0,
                    task_id: this.id
                }).then(res => {
                    this.pilotNoTaskData = res.data
                    this.getTaskPilot()//刷新有任务飞手列表
                })
            },
            getTaskPilot() {//获取任务飞手
                this.http('get', 'pilot/index', {task_id: this.id, page_size: 50}).then(res => {
                    this.oldPilotData = JSON.stringify(res.data)
                    this.pilotData = res.data
                })
            },
            taskPilotCheck(k) {//有任务飞手取消选中
                this.pilotNoTaskData.push(this.pilotData[k])
                this.pilotData.splice(k, 1)
                let data = this.pilotData
                if (data.length > 0) {
                    let had_main = false
                    data.map(v => {
                        if (v.is_main == 1) {
                            had_main = true
                        }
                    })
                    if (!had_main) {
                        this.pilotData[0].is_main = 1
                    }
                }
            },
            noTaskPilotCheck(k) {//无任务飞手选中
                let data = this.pilotData
                if (data.length > 0) {
                    this.pilotNoTaskData[k].is_main = 0
                } else {
                    this.pilotNoTaskData[k].is_main = 1
                }
                this.pilotNoTaskData[k].status = '未确定'
                this.pilotData.push(this.pilotNoTaskData[k])
                this.pilotNoTaskData.splice(k, 1)
                let datas = this.pilotData
                if (datas.length > 0) {
                    let had_main = false
                    datas.map(v => {
                        if (v.is_main == 1) {
                            had_main = true
                        }
                    })
                    if (!had_main) {
                        this.pilotData[0].is_main = 1
                    }
                }
            },
            setMainPilot(key) {//设为主飞手
                let data = this.pilotData;
                data.map((v, k) => {
                    if (key == k) {
                        data[k].is_main = 1
                    } else {
                        data[k].is_main = 0
                    }
                });
                this.pilotData = data;
            },
            draw() {
                let width = document.querySelector('.canvas-container').offsetWidth;

                if (window.innerWidth <= 1366) {
                    this.canvas.width = 880
                } else {
                    this.canvas.width = width - 20
                }
                this.ctx.save();
                this.ctx.translate(0, 140);
                this.drawMainLine();
                this.drawPeriodLine();
                this.drawPlanTask();
                this.drawRealTask();
                this.drawDeliverTime();
                this.ctx.restore();

                if(this.step < this.totalStep){
                    this.step++;
                    setTimeout(() => {
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                        this.draw();
                    }, this.speed);
                }
            },
            drawMainLine() {
                let mainLineWidth = this.canvas.width;

                let mainLineSpace = 25;
                let mainLineWidthChange = mainLineWidth - mainLineSpace;

                let upMainLineWidth = mainLineWidth - 2 * this.padding;
                this.timeInfo.sort();
                this.k = ((this.timeInfo[this.timeInfo.length - 1] - this.timeInfo[0]) / upMainLineWidth).toFixed(2);

                this.ctx.beginPath();
                this.ctx.lineCap = 'round';
                this.ctx.lineWidth = '5';
                this.ctx.strokeStyle = "#1890FF";
                this.ctx.moveTo(mainLineSpace, 0);
                this.ctx.lineTo(mainLineWidthChange, 0);
                this.ctx.stroke();

                let rightTriangleCapHeight = 18;
                this.ctx.beginPath();
                this.ctx.moveTo(mainLineWidth, 0);
                this.ctx.lineWidth = '5';
                this.ctx.fillStyle="#1890FF";
                this.ctx.lineTo(mainLineWidthChange, -rightTriangleCapHeight);
                this.ctx.lineTo(mainLineWidthChange, rightTriangleCapHeight);
                this.ctx.fill();
            },
            drawPeriodLine() {
                let periods = this.data.period_time.split('-');

                let cap = 8;
                let initialHeight = 110;
                let height =  this.step/this.totalStep * initialHeight;

                let a = Math.round((moment(periods[0], 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);
                let b = Math.round((moment(periods[1], 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);

                this.ctx.beginPath();
                this.ctx.lineWidth = '2';
                this.ctx.strokeStyle = "#1890FF";
                this.ctx.moveTo(this.padding + a, 0);
                this.ctx.lineTo(this.padding + a, -height);
                this.ctx.stroke();

                this.ctx.fillStyle="#C8D0E9 ";
                this.ctx.font = "12px Microsoft YaHei";
                if ((b - a) > 110) {
                    this.ctx.fillText(periods[0], this.padding + a - 50, -height - cap, 100);
                } else {
                    this.ctx.fillText(periods[0], this.padding + a - 100, -height - cap, 100);
                }

                this.ctx.beginPath();
                this.ctx.lineWidth = '2';
                this.ctx.strokeStyle = "#1890FF";
                this.ctx.moveTo(this.padding + b, 0);
                this.ctx.lineTo(this.padding + b, -height);
                this.ctx.stroke();

                this.ctx.fillStyle="#C8D0E9 ";
                this.ctx.font = "12px Microsoft YaHei";
                if ((b - a) > 110) {
                    this.ctx.fillText(periods[1], this.padding + b - 50, -height-cap, 100);
                } else {
                    this.ctx.fillText(periods[1], this.padding + b, -height-cap, 100);
                }

                if ( b - a > 32) {
                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#fff";
                    this.ctx.moveTo(this.padding + a + 2 * cap, -height + cap);
                    this.ctx.lineTo(this.padding + a + cap, -height + 2 * cap);
                    this.ctx.lineTo(this.padding + a + 2 * cap, -height + 3 * cap);
                    this.ctx.stroke();
                }

                this.ctx.beginPath();
                this.ctx.lineWidth = '2';
                this.ctx.strokeStyle = "#fff";
                this.ctx.moveTo(this.padding + a + cap, -height + 2 * cap);
                this.ctx.lineTo(this.padding + b - cap, -height + 2 * cap);
                this.ctx.stroke();

                if ( b - a > 32) {
                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#fff";
                    this.ctx.moveTo(this.padding + b - 2 * cap, -height + cap);
                    this.ctx.lineTo(this.padding + b - cap, -height + 2 * cap);
                    this.ctx.lineTo(this.padding + b - 2 * cap, -height + 3 * cap);
                    this.ctx.stroke();
                }

                this.ctx.fillStyle="#C8D0E9 ";
                this.ctx.font = "12px Microsoft YaHei";
                this.ctx.fillText("本周期起止时间", (b + a) / 2 + this.padding - 50, -height + cap, 100);
            },
            drawPlanTask() {
                if (!isNaN(moment(this.data.plan_started_at).valueOf())
                && !isNaN(moment(this.data.plan_ended_at).valueOf())) {
                    let start = this.data.plan_started_at;
                    let end = this.data.plan_ended_at;
                    let cap = 8;

                    let initialHeight = 60;
                    let height =  this.step/this.totalStep * initialHeight;

                    let a = Math.round((moment(start, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);
                    let b = Math.round((moment(end, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#1890FF";
                    this.ctx.moveTo(this.padding + a, 0);
                    this.ctx.lineTo(this.padding + a, -height);
                    this.ctx.stroke();

                    this.ctx.fillStyle="#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    if ((b - a) > 110) {
                        this.ctx.fillText(start, this.padding + a - 55, -height - cap, 110);
                    } else {
                        this.ctx.fillText(start, this.padding + a - 110, -height - cap, 110);
                    }

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#1890FF";
                    this.ctx.moveTo(this.padding + b, 0);
                    this.ctx.lineTo(this.padding + b, -height);
                    this.ctx.stroke();

                    this.ctx.fillStyle="#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    if ((b - a) > 110) {
                        this.ctx.fillText(end, this.padding + b - 55, -height-cap, 110);
                    } else {
                        this.ctx.fillText(end, this.padding + b, -height-cap, 110);
                    }

                    if ( b - a > 32) {
                        this.ctx.beginPath();
                        this.ctx.lineWidth = '2';
                        this.ctx.strokeStyle = "#BC77FF";
                        this.ctx.moveTo(this.padding + a + 2 * cap, -height + cap);
                        this.ctx.lineTo(this.padding + a + cap, -height + 2 * cap);
                        this.ctx.lineTo(this.padding + a + 2 * cap, -height + 3 * cap);
                        this.ctx.stroke();
                    }

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#BC77FF";
                    this.ctx.moveTo(this.padding + a + cap, -height + 2 * cap);
                    this.ctx.lineTo(this.padding + b - cap, -height + 2 * cap);
                    this.ctx.stroke();

                    if ( b - a > 32) {
                        this.ctx.beginPath();
                        this.ctx.lineWidth = '2';
                        this.ctx.strokeStyle = "#BC77FF";
                        this.ctx.moveTo(this.padding + b - 2 * cap, -height + cap);
                        this.ctx.lineTo(this.padding + b - cap, -height + 2 * cap);
                        this.ctx.lineTo(this.padding + b - 2 * cap, -height + 3 * cap);
                        this.ctx.stroke();
                    }

                    this.ctx.fillStyle="#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText("任务计划起止时间", (a + b) / 2 + this.padding - 50, -height + cap, 100);
                }
            },
            drawRealTask() {
                if (!isNaN(moment(this.data.started_at).valueOf())
                    && !isNaN(moment(this.data.ended_at).valueOf())) {
                    let start = this.data.started_at;
                    let end = this.data.ended_at;
                    let cap = 8;

                    let initialHeight = -60;
                    let height =  this.step/this.totalStep * initialHeight;

                    let a = Math.round((moment(start, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);
                    let b = Math.round((moment(end, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#1890FF";
                    this.ctx.moveTo(this.padding + a, 0);
                    this.ctx.lineTo(this.padding + a, -height);
                    this.ctx.stroke();

                    this.ctx.fillStyle = "#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    if ((b - a) > 110) {
                        this.ctx.fillText(start, this.padding + a - 55, -height + cap + 10, 110);
                    } else {
                        this.ctx.fillText(start, this.padding + a - 110, -height + cap + 10, 110);
                    }

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#1890FF";
                    this.ctx.moveTo(this.padding + b, 0);
                    this.ctx.lineTo(this.padding + b, -height);
                    this.ctx.stroke();

                    this.ctx.fillStyle="#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    if ((b - a) > 110) {
                        this.ctx.fillText(end, this.padding + b - 55, -height + cap + 10, 110);
                    } else {
                        this.ctx.fillText(end, this.padding + b, -height + cap + 10, 110);
                    }

                    if ( b - a > 32) {
                        this.ctx.beginPath();
                        this.ctx.lineWidth = '2';
                        this.ctx.strokeStyle = "#1776E7 ";
                        this.ctx.moveTo(this.padding + a + 2 * cap, -height - cap + 8);
                        this.ctx.lineTo(this.padding + a + cap, -height - 2 * cap + 8);
                        this.ctx.lineTo(this.padding + a + 2 * cap, -height - 3 * cap + 8);
                        this.ctx.stroke();
                    }

                    this.ctx.beginPath();
                    this.ctx.lineWidth = '2';
                    this.ctx.strokeStyle = "#1776E7 ";
                    this.ctx.moveTo(this.padding + a + cap, -height - 2 * cap + 8);
                    this.ctx.lineTo(this.padding + b - cap, -height - 2 * cap + 8);
                    this.ctx.stroke();

                    if ( b - a > 32) {
                        this.ctx.beginPath();
                        this.ctx.lineWidth = '2';
                        this.ctx.strokeStyle = "#1776E7 ";
                        this.ctx.moveTo(this.padding + b - 2 * cap, -height - cap + 8);
                        this.ctx.lineTo(this.padding + b - cap, -height - 2 * cap + 8);
                        this.ctx.lineTo(this.padding + b - 2 * cap, -height - 3 * cap + 8);
                        this.ctx.stroke();
                    }

                    this.ctx.fillStyle="#C8D0E9 ";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText("任务实际起止时间", (a + b) / 2 + this.padding - 50, -height - 2 * cap, 100);
                }
            },
            drawDeliverTime() {
                let periods = this.data.period_time.split('-');
                let end = periods[1];
                let handDay = '';
                if (this.data.hand_type === '周期结束前') {
                    handDay = moment(periods[1], 'YYYY.MM.DD HH:mm').subtract(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm')
                } else if (this.data.hand_type === '周期结束后') {
                    handDay = moment(periods[1], 'YYYY.MM.DD HH:mm').add(this.data.hand_day, 'days').format('YYYY-MM-DD HH:mm')
                }

                let plan = handDay;
                let actual = this.data.handed_at;

                let initialHeight = -16;

                let a = Math.round((moment(plan, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);
                let b = Math.round((moment(actual, 'YYYY.MM.DD HH:mm').valueOf() - this.timeInfo[0]) / this.k);

                this.ctx.lineWidth = '1';
                if(this.data.hand_type !== '不指定' && !isNaN(moment(handDay).valueOf())) {
                    this.ctx.beginPath();
                    this.ctx.fillStyle = '#D0021B';
                    this.ctx.strokeStyle = '#D0DFEE';
                    this.ctx.arc(a + this.padding, initialHeight-2, 11, 5 * Math.PI / 6, Math.PI / 6, false);
                    this.ctx.lineTo(a + this.padding, -2);
                    this.ctx.closePath();
                    this.ctx.fill();
                    this.ctx.stroke();

                    this.ctx.fillStyle = "#C8D0E9";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText(plan, a + this.padding + 15, -25, 100);
                    this.ctx.fillStyle = "#1890FF";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText("指定数据交付时间", a + this.padding + 15, -10, 100);
                }
                if (!isNaN(moment(this.data.handed_at).valueOf())) {
                    this.ctx.beginPath();
                    this.ctx.fillStyle = '#288CE8';
                    this.ctx.strokeStyle = '#D0DFEE';
                    this.ctx.arc(b + this.padding, -initialHeight + 2, 11, 7 * Math.PI / 6, 11 * Math.PI / 6, true);
                    this.ctx.lineTo(b + this.padding, 2);
                    this.ctx.closePath();
                    this.ctx.fill();
                    this.ctx.stroke();

                    this.ctx.fillStyle = "#C8D0E9";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText(actual, b + this.padding + 15, 30, 100);
                    this.ctx.fillStyle = "#1890FF";
                    this.ctx.font = "12px Microsoft YaHei";
                    this.ctx.fillText("实际数据交付时间", b + this.padding + 15, 15, 100);
                }
            },
            pickTime(v) {
                this.start_end = v;
                this.plan_time = {plan_time: [
                    moment(this.start_end[0]).format('YYYY-MM-DD HH:mm:ss'),
                    moment(this.start_end[1]).format('YYYY-MM-DD HH:mm:ss')
                ]};
                this.http('put', 'task/update?id=' + this.id, this.plan_time).then(res => {
                    if (res.status === 200) {
                        this.$message.success(res.msg, 1);
                        this.timeInfo = [];
                        this.getDetail(this.id);
                        if (this.step === this.totalStep) this.step = 0;
                        this.draw();
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                });
            },
            cancelSelect(val) {
                this.showTimePicker = false;
            },
            showKmlMapContent(kml) {
                this.kml = kml;
                this.showKmlMap = true
            },
            returned() {
                this.pilotData = JSON.parse(this.oldPilotData)
            },

            async getPushDate(){
                const task = this.data
                 this.http('get', 'push/index', {
                    task_id: task.id,
                    order_id: task.order_id,
                    page: 1,
                    page_size: 10000,
                }).then(res => {
                    this.push_date_list = res.data.map(item => {
                        return item.updated_at ? item.updated_at.split(' ')[0] : undefined
                    })
                })
            },

            async getPushList(){
                const task = this.data
                this.http('get', 'push/index', {
                    task_id: task.id,
                    order_id: task.order_id,
                    ...this.push_list.pagination
                }).then(res => {
                    console.log(' --> res: ', res)
                    this.pushList = res.data || []
                    if(this.pushList.length < res.total_count){
                        this.push_list.pagination.page_size = 10000
                        this.push_all_show = true
                    }else{
                        this.push_list.pagination.page_size = 3
                        this.push_all_show = false
                    }
                })
            },
            handleUploadFile(args){
                console.log(' --> args: ', args)

                let fileName = args.file.name,
                    name = fileName.substring(0, fileName.lastIndexOf('.')),
                    suffix = fileName.substring(fileName.lastIndexOf('.')+1, fileName.length),
                    size = args.file.size
                console.log(' --> name: ', name)
                console.log(' --> suffix: ', suffix)

                let { pushForm } = this
                if(!pushForm.getFieldValue('content')){
                    this.pushForm.setFieldsValue({
                        content: name
                    })
                }

                let params = new FormData();
                params.append("video", args.file);
                this.http(
                    "post",
                    config.uploadURL,
                    params
                ).then(resp => {
                    console.log("resp:", resp)
                    this.pushFile.push({
                        filename: name,
                        suffix: suffix,
                        size: size,
                        url: resp.url
                    })
                    return args.onSuccess({code:200}, args.file);
                }).catch(e => console.error(e))
            },
            handleCreatePush(){
                this.pushForm.validateFields(async (err, values) => {
                    if(!err){
                        console.log("values:", values, this.pushFile)
                        const task = this.data
                        values.images = this.pushFile
                        let resp = await this.http('post', '/push/add', {
                            task_id: task.id,
                            ...values
                        })
                        if(resp && resp.status === 200){
                            this.$message.success(resp.msg, 1);
                            this.getPushList()
                        }else{
                            this.$message.error(resp.msg, 1);
                        }
                    }
                })
            },
            handleDeletePush(push){
                this.$confirm({
                    title: '系统提示',
                    content: '确定要删除该消息么',
                    okType: 'danger',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: async close => {
                        console.log(' --> PUSH: ', push)
                        let resp = await this.http('delete', `/push/delete?id=${push.id}`)
                        if(resp && resp.status === 'success'){
                            this.$message.success('删除成功', 1);
                            await this.getPushList()
                            close()
                        }else{
                            this.$message.error('删除失败', 1);
                        }
                    }
                });
            },

            async handleShowEditPush(push){
                await this.edit_push_form.setFieldsValue({
                    content: push.content
                })
                this.select_push=push
                this.edit_push_visible=true
            },

            /** 修改消息内容 */
            handleEditPush(){
                this.edit_push_form.validateFields(async (err, values) => {
                    if(!err){
                        let { select_push } = this
                        let resp = await this.http('put', `/push/upgrade?id=${select_push.id}`, {
                            ...values
                        })
                        if(resp && resp.status === 200){
                            this.$message.success('修改成功', 1);
                            this.edit_push_visible=false
                            await this.getPushList()
                        }else{
                            this.$message.error('修改失败', 1);
                        }
                    }
                })
            },

            /** 拒绝任务弹窗 */
            handleShowRefuseTask(push){
                this.select_push=push
                this.refuse_task_visible=true
            },

            /** 拒绝任务 */
            handleRefuseTask(){
                this.refuse_task_form.validateFields(async (err, values) => {
                    if(!err){
                        console.log(' --> values: ', values)
                        const { select_push } = this
                        let resp = await this.http('put', `/push/upgrade?id=${select_push.id}`, {
                            status: 1, 
                            handle: 0,
                            ...values
                        })
                        if(resp && resp.status === 200){
                            this.$message.success('修改成功', 1);
                            await this.getPushList()
                            this.refuse_task_visible = false
                        }else{
                            this.$message.success('修改失败', 1);
                        }
                    }
                })
            },

            /** 接受任务 */
            async handleAcceptTask(push){
                let resp = await this.http('put', `/push/upgrade?id=${push.id}`, {
                    status: 1, 
                    handle: 1,
                })
                if(resp && resp.status === 200){
                    this.$message.success('修改成功', 1);
                    await this.getPushList()
                    this.refuse_task_visible = false
                }else{
                    this.$message.success('修改失败', 1);
                }
            },

            getDateData(e){
                const { data } = this
                if(data){
                    if(data.period_time){
                        let value_m = new Date(e.format('YYYY-MM-DD hh:mm:ss')).getTime(),
                            time = data.period_time.split('-'),
                            start_m = new Date(time[0]).getTime(),
                            end_m = new Date(time[1]).getTime()
                        return Boolean(value_m >= start_m && value_m <= end_m)
                    }
                }
                return false
            },

            initCalendar(){
                const { data } = this
                if(data.status_id === 6){
                    //显示任务完成月份
                    this.time_push = moment(data.service_completed_at).format('YYYY年MM月DD日')
                    this.time_value = moment(data.service_completed_at)
                }else{
                    this.time_push = moment().format('YYYY年MM月DD日')
                    this.time_value = moment()
                }
            },

            getDateFile(e){
                let value = e.format('YYYY-MM-DD')
                const { push_date_list } = this
                return push_date_list.includes(value)
            },

            handleSelectDate(e){

                this.time_push = e.format('YYYY年MM月DD日')

                const task = this.data
                this.http('get', 'push/index', {
                    task_id: task.id,
                    order_id: task.order_id,
                    page: 1, 
                    page_size: 10000,
                    created_at: e.format('YYYY-MM-DD')
                }).then(res => {
                    this.time_push_list = res.data || []
                })
            }
        },
        async mounted() {
            this.id = this.$route.params.id;
            await this.getDetail(this.id);
            this.getTaskPilot();
            //this.getPush();

            await this.getPushDate()

            await this.getPushList()

            this.initCalendar()
            

            this.canvas = document.getElementById("myCanvas");
            this.ctx = this.canvas.getContext("2d");

            if (this.step === this.totalStep) this.step = 0;
            this.draw();
            window.onresize = () => {
                if (document.querySelector('.canvas-container')) {
                    this.draw()
                }
            };
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .confirm-delete-wrapper {
        width: 100%;
        padding: 20px;
        text-align: center;
        p {
            font-size: 16px;
        }
    }

    .header {
        @include fj();
        margin-bottom: 20px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .file-necessary {
        color: #f5222d;
        position: absolute;
        top: 32px;
        width: 100px;
    }

    .task-wrapper {
        margin-left: -24px;
        margin-right: -24px;
        position: relative;
        transition: padding-top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        &.active {
            padding-top: 65px;
        }
        .push-wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            width: 100%;
            margin-top: -24px;
            margin-bottom: 24px;
            background: #293043;
        }
        .basic-info-wrapper {
            border-bottom: 1px solid #1E2026;
            margin-bottom: 20px;
            padding-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .report-info-wrapper {
            border-bottom: 1px solid #1E2026;
            margin-bottom: 20px;
            padding-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .address-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .address-a {
                    margin-bottom: 18px;
                    .prefix-name {
                        font-size: 0.925rem;
                    }
                    .address-show {
                        cursor: pointer;
                    }
                    .textarea-desc {
                        @include fj(flex-start);
                        align-items: baseline;
                    }
                    & > div + div {
                        margin-top: 18px;
                    }
                }
                .address-b {
                    margin-bottom: 25px;
                    @include fj()
                }
                .operate-column {
                    @include fj(space-around);
                }
                .relate-image {
                    display: block;
                    margin-bottom: 8px;
                }
                .img-displayed {
                    img + img {
                        margin-left: 10px;
                    }
                }
                .img-view {
                    @include wh(100px, 100px);
                    cursor: pointer;
                }
            }
        }
        .time-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .revise-time {
                    @include fj(flex-start);
                    a {
                        margin-left: 10px;
                    }
                }
                .calendar-display {
                    margin-top: 30px;
                }
            }
            .time-label {
                font-size: 0.925rem;
            }
        }
        .person-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .note-selected-pilot {
                    margin-bottom: 30px;
                }
                .change-wrapper {
                    padding-left: 18px;
                    padding-right: 18px;
                }
                .before-select-note, .before-select {
                    margin-bottom: 30px;
                }
                .operate-right {
                    margin-right: 18px;
                }
            }
        }
        .task-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .time-select-a {
                    @include fj(flex-end);
                    margin-bottom: 20px;
                    & > div + div {
                        margin-left: 20px;
                    }
                    .ant-select {
                        width: 200px;
                    }
                }
            }
        }
        .device-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .push-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .status-info-wrapper {
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                & > .form-main-content {
                    & > .status-table {
                        width: 60%;
                    }
                }
            }
        }
    }

    #update-form {
        position: relative;
        @include transition(padding-bottom, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
        &.active {
            padding-bottom: 370px;
        }
        .more-info-img {
            position: relative;
            transform-origin:center center;
            left: 6px;
            @include transition(transform, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
            &.active {
                transform: rotate(-180deg);
                -webkit-transform: rotate(-180deg);
                -moz-transform: rotate(-180deg);
                -ms-transform: rotate(-180deg);
                -o-transform: rotate(-180deg);
            }
        }

        .extra-info {
            position: absolute;
            width: 100%;
            margin-top: 0;
            height: 0;
            opacity: 0;
            visibility: hidden;
            @include transition(all, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
            &.active {
                padding-top: 20px;
                margin-top: 10px;
                height: 470px;
                opacity: 1;
                visibility: visible;
                z-index: 1;
            }
            .extra-info-form {
                border: 1px solid #000;
                padding-top: 20px;
                padding-left: 50px;
                margin-right: 20px;
            }
        }
    }
    .canvas-container {
        border: 1px solid #000;
        @include centering;
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }

    .kml-file-name {
        width: 200px;
        position: absolute;
    }

    .kml-file-upload {
        position: absolute;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s linear;
    }

    .fade-enter, .fade-leave-to{
        transform: translateY(5px);
        opacity: 0;
    }
    .shadeTier{
        position: fixed;
        background: rgba($color: #000000, $alpha: 0.4);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .shadeMap{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        overflow: scroll;
        .popUpImg{
            display: flex;
            margin-top: 150px;
            transform: scale(0);
            transition: .5s;
            .img{
                position: relative;
                background: #1E2026;
                margin: auto;
                padding: 25px;
                max-width: 95%;
                .shut{
                    position: absolute;
                    top:0px;
                    right: 0px;
                    width: 40px;
                    height: 40px;
                    font-size: 18px;
                    text-align: center;
                    line-height: 40px;
                    z-index: 999;
                    cursor: pointer;
                    color: #C8D0E9;
                }
                .shut:hover{
                    color: #fff;
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .msg-box{
        border: 1px solid #696969;
        height: 300px;
        overflow: auto;
        box-sizing: border-box;
        padding: 5px 10px;
        position: relative;
        overflow: hidden;
        .files{
            box-sizing: border-box;
            padding: 0px 20px;
        }
        .show_all{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            &:hover{
                color: #1890FF;
            }
        }

    }
    
</style>
<style lang='scss'>
    :global {

        .ant-fullcalendar-header{
            padding: 11px 0px 11px 0;
        }

        .ant-fullcalendar-calendar-body{
            padding: 0px;
        }

        .ant-fullcalendar-selected-day{
            .ant-fullcalendar-date{
                //background: #bcdbf9;
                background: transparent !important;
            }
        }

        .ant-fullcalendar td{
            border: 1px solid #ebeef5;
        }
        
        .ant-fullcalendar-fullscreen {
            .ant-fullcalendar-column-header{
                border: 1px solid #ebeef5;
                background-color: #1890ff;
                padding: 10px 0px;
                text-align: center;
                .ant-fullcalendar-column-header-inner{
                    font-weight: bold;
                }
            }
            .ant-fullcalendar-date{
                height: 40px;
                margin: -1px;
                border-top: none;
                overflow: hidden;
                position: relative;
                .ant-fullcalendar-value{
                    position: relative;
                    z-index: 10;
                }
                .ant-fullcalendar-content{
                    .badge-box{
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        background: #e6f7ff;
                    }
                    .badge{
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        display: inline-block;
                        padding: 0.4em 0.4em;
                        min-width: 10px;
                        border-radius: 18px;
                        background-color: #fa5151 !important;
                        color: #fff;
                        line-height: 1.2;
                        text-align: center;
                        font-size: 12px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>
